<template>
<div class="box">
  <h2>音乐馆</h2>
  <el-menu
      style="margin-right: 100px"
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      active-text-color="green"
      @select="handleSelect"
      router
  >
    <el-menu-item   index="/homePage/music_Hall/1">精选</el-menu-item>
    <el-menu-item   index="/homePage/music_Hall/2">排行</el-menu-item>
    <el-menu-item   index="/homePage/music_Hall/3">歌手</el-menu-item>
    <el-menu-item   index="/homePage/music_Hall/4">分类歌单</el-menu-item>
  </el-menu>
</div>
  <router-view></router-view>


</template>

<script setup>
import {ref} from "vue"
const activeIndex = ref("1")
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.box{
  width:100%;
  height: 100px;
  margin-top: 80px;
  padding-left: 30px;
}
</style>